<template>
  <div class="line" ref="container"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted, defineProps, watch, ref, shallowRef } from 'vue'
const { option } = defineProps({ option: Object })
// console.log(option, 1111)
// console.log(props);
const container = ref()
let lineChart = shallowRef()
onMounted(() => {
  lineChart.value = echarts.init(container.value)
  lineChart.value.setOption(option)
  setChartOptions(option)
  // 图表自适应
  window.addEventListener('resize', () => {
    if (lineChart.value) {
      lineChart.value.resize()
    }
  })
})
// 监听option的变化
watch(option, () => {
  // console.log(option, 222)
  if (lineChart.value) {
    lineChart.value.setOption(option)
  }
})
// 设置图表选项的函数
function setChartOptions(option: Record<string, any>) {
  // 根据窗口宽度计算字体大小
  const fontSize = ((window.innerWidth / 10) * 12) / 192

  // 设置 legend 的字体大小
  option.legend = {
    ...option.legend,
    textStyle: {
      ...(option.legend?.textStyle || {}),
      fontSize: fontSize // 使用正确的属性名
    },
    itemWidth: fontSize, // 设置 legend 项的宽度
    itemHeight: fontSize //
  }

  // 更新图表选项
  lineChart.value?.setOption(option)
}
</script>

<style scoped lang="scss">
.line {
  width: 100%;
  height: 100%;
}
</style>
